<template>
  <div class="container">
    <div class="head">
      <div class="module-tit">个人资料</div>
      <div class="update" @click="openDialog">修改信息</div>
    </div>
    <div class="body">
      <el-form label-width="150px">
      <el-form-item class="shopItem" label="店主姓名：">{{myinfo.shopOwner?myinfo.shopOwner: '未定义'}}</el-form-item>
      <el-form-item class="shopItem" label="手机号码：">{{myinfo.mobile? myinfo.mobile: '未定义'}}</el-form-item>
      <el-form-item class="shopItem" label="店铺名称：">{{myinfo.shopName}}</el-form-item>
      <el-form-item class="shopItem" label="店铺标语：">
        <span v-if="myinfo.intro">{{myinfo.intro}}</span>
        <span v-if="!myinfo.intro" style="color:#02A1E9;cursor:pointer;" @click="introVisible=!introVisible">去填写</span>
      </el-form-item>
      <el-form-item class="shopItem" label="店铺地址：">{{myinfo.address}}</el-form-item>
      <el-form-item class="shopItem" label="开店时间：">{{myinfo.createTime}}</el-form-item>
      <el-form-item class="shopItem" label="提现账户：">
        <span v-if="myinfo.cardNumber">{{myinfo.cardNumber}}</span>
        <span v-if="!myinfo.cardNumber" size="medium" type="primary">未绑定，<span style="color:#02A1E9;cursor:pointer;"  @click="$router.push({path:'/setBankAccount',})">立即绑定</span></span>
      </el-form-item>
      <el-form-item class="shopItem" label="开户行号：">
        <span v-if="myinfo.bankCode">{{myinfo.bankCode}}</span>
        <span v-if="!myinfo.bankCode" size="medium" type="primary">未绑定，<span style="color:#02A1E9;cursor:pointer;"  @click="$router.push({path:'/setBankAccount',})">立即绑定</span></span>
      </el-form-item>
      <!-- <el-form-item class="shopItem" label="账户余额：">{{myinfo.account}}元</el-form-item> -->
      <el-form-item class="shopItem" label="营业执照：">
        <img :src="bussinessLicense" class="bussinessLicense">
        <!-- <el-image
          style="width: 100px; height: 100px"
          :src="idImgs[0]"
          :preview-src-list="idImgs">
        </el-image> -->
        <!-- {{idImgs}} -->
      </el-form-item>
      <el-form-item class="shopItem" label="身份证正反面：">
        <img v-for="(item,index) in idImgs" :src="item" :key="index" alt="" class="idImgs">
      </el-form-item>
      <el-form-item class="shopItem" label="卫生许可证：">
        <img :src="hygienicLicense" alt="" class="hygieiclence">
      </el-form-item>
      <!-- <el-button type="primary" >修改信息</el-button> -->
      </el-form>
    </div>
    <update v-bind:myinfo="myinfo"
            v-if="updateVisible"
            ref="update"
            @refresh="getMyInfo"></update>

    <el-dialog
      title="填写店铺标语"
      :visible.sync="introVisible"
      width="30%"
      center
      :append-to-body="true">
      <div style="100%"><el-input v-model="myinfo.intro"></el-input></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="introVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateIntro">确 定</el-button>
      </span>
    </el-dialog>



	</div>
</template>>

<script>
import update from './myself-update'

export default {
  data(){
    return {
      updateVisible: false,
      introVisible: false,
      myinfo: {
        idCard :''
      },
      resourcesUrl: window.SITE_CONFIG.resourcesUrl
    }
  },

  computed:{
    idImgs(){
      var idImgs=[]
      console.log(this.myinfo.idCard);
      this.myinfo.idCard.split(',').forEach((item) =>{
        idImgs.push(this.resourcesUrl+item)
      })
      return idImgs
    },
    address(){
      var myinfo = this.myinfo
      return [myinfo.province,myinfo.city,myinfo.area,myinfo.shopAddress].join('')
    },
    bussinessLicense(){
      return this.resourcesUrl+this.myinfo.bussinessLicense
    },
    hygienicLicense(){
      return this.resourcesUrl+this.myinfo.hygienicLicense
    }
  },

  components:{
    update
  },

  methods:{
    getMyInfo(){
      this.$http({
        url:this.$http.adornUrl("/shop/shopDetail/getShopDetailInformation"),
        method: 'get',
      }).then(({data}) =>{
        console.log(data);
        this.myinfo = data
        this.myinfo.address = data.province+data.city+data.area+data.shopAddress
      })
    },

    openDialog(){
      this.updateVisible = true
      this.$nextTick(() =>{
        this.$refs.update.init(this.myinfo)
      })
    },

    updateIntro(){
      this.$http({
        url: this.$http.adornUrl(`/shop/shopDetail/updateInformation`),
        method: 'put' ,
        params: this.$http.adornParams({
          intro: this.myinfo.intro
        })
      }).then(({ data }) => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1500,
        })
        this.introVisible = false
        this.getMyInfo()
      })
    },
  },

  created(){
    this.getMyInfo()
  },



}
</script>

<style scoped>
div{
  padding: 0;
  margin: 0;
}
.container{
  height: 100%;
  width: 100%;
  margin-bottom: 30px;
}
.container .head{
  height: 50px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 0 15px;
}
.container .head .module-tit{
  font-size: 17px;
  color: #21252F;
  font-weight: 550;
}
.container .head .module-tit::before{
  content: '';
  border-right: 3px solid #0087EB;
  margin-right: 5px;
}
.container .head .update{
  border: 1px solid #46A3F1;
  font-size: 12px;
  height: 27px;
  line-height: 27px;
  width: 60px;
  border-radius: 4px;
  text-align: center;
  color: #46a3f1;
  cursor: pointer;
}
.container .body{
  margin-left: 20px;
}
.container .body .shopItem{
  margin: 0px 0;
}

.body img{
  width: 300px;
  margin: 10px;
  border-radius: 6px;
}
.el-dialog__wrapper {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
